<template>
  <div>
    <base-list ref="matterPageList"
               :condition="condition"
               :datas.sync="kvoList"
               :isPaging="false">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               ref="aList"
               label-width="80px">
        <el-row>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="所属仓库">
              <el-select v-model="condition['search_EQ_warehouseCode']"
                         placeholder="请选择"
                         @change="changeWarehouse">
                <el-option v-for="(item,index) in warehouseList"
                           :key="index"
                           :label="item.name"
                           :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="库房">
              <el-select v-model="condition['search_EQ_roomCode']"
                         placeholder="请选择"
                         clearable
                         @change="changeTargetRoom">
                <el-option v-for="(item,index) in storageSet"
                           :key="index"
                           :label="item.roomName"
                           :value="item.roomCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="跨数">
              <el-select v-model="condition['search_EQ_spanNo']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="item in ktipArr"
                           :key="item"
                           :label="item<10?'0'+item : item"
                           :value="item<10?'0'+item : item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="间数">
              <el-select v-model="condition['search_EQ_aulaNo']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="item in jtipArr"
                           :key="item"
                           :label="item<10?'0'+item : item"
                           :value="item<10?'0'+item : item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="货主">
              <auto-search-name placeholder="请选择"
                                @selectId="v=>condition['search_EQ_cargoOwnerId']=v"
                                :name="condition.cargoOwnerName"></auto-search-name>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="品名">
              <el-select v-model="condition['search_EQ_cargoName']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <!-- @change="handleCargoChange('pm')" -->
                <el-option v-for="item in cargoNameList"
                           :key="item.cargoName"
                           :label="item.cargoName"
                           :value="item.cargoName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="材质">
              <auto-search-dic v-model="condition['search_EQ_material']"
                               @selectName="v=>condition['search_EQ_material']=v"
                               code="CARGO_CZ"></auto-search-dic>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="管理方式"
                          prop="condition['search_EQ_manageWay']">
              <el-select v-model="condition['search_EQ_manageWay']"
                         placeholder="请选择"
                         clearable
                         filterable
                         @change="handleCargoChange">
                <el-option v-for="[key, val] in _dictManagement"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="计量方式"
                          prop="condition['search_EQ_measureWay']">
              <el-select v-model="condition['search_EQ_measureWay']"
                         placeholder="请选择"
                         clearable
                         filterable
                         @change="handleCargoChange">
                <el-option v-for="[key, val] in _dictMeterStyle"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width8">
            <el-form-item label="规格"
                          class="gg-input">
              <el-col :span="8">
                <auto-search-dic style="width: 100px;"
                                 @selectName="v=>condition['search_EQ_normOne']=v"
                                 code="CARGO_GGY"></auto-search-dic>
              </el-col>
              <el-col :span="8">
                <auto-search-dic style="width: 100px;"
                                 @selectName="v=>condition['search_EQ_normTwo']=v"
                                 code="CARGO_GGE"></auto-search-dic>
              </el-col>
              <el-col :span="8">
                <auto-search-dic style="width: 100px;"
                                 @selectName="v=>condition['search_EQ_normThree']=v"
                                 code="CARGO_GGS"></auto-search-dic>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="getPlatDatas">查 询</el-button>
            <el-button formVisible="true"
                       icon="el-icon-refresh"
                       @click="resuleBtn('aList')">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row slot="status">
        <el-button type="primary"
                   @click="handleOpen({path:'/goods/matter/inOutRecord',name:'出入库记录'})">
          出入库记录
        </el-button>
        <el-button type="primary"
                   @click="handleOpen({path:'/goods/matter/stockManage',name:'库存管理'})">
          库存管理
        </el-button>
        <el-button type="primary"
                   @click="handleOpen({path:'/goods/matter/auditMatter',name:'实物调整审核'})">
          实物调整审核
        </el-button>
        <el-button type="primary"
                   @click="handleOpen({path:'/goods/matter/shiftSearch',name:'移位调整查询'})">
          移位调整查询
        </el-button>
        <el-button type="primary"
                   @click="handleOpen({path:'/goods/matter/cheackPlan',name:'盘点计划查询'})">
          盘点计划查询
        </el-button>
      </el-row>
      <div slot="list"
           v-if="isShow">
        <div class="Legend">
          <div class="Legend-title">图例</div>
          <div class="Legend-content"
               v-for="item in cargoTypeList"
               :key="item.cargoTypeName">
            <div class="Legend-color"
                 :style="{'backgroundColor': item.color}"></div>
            <div>{{item.cargoTypeName}}</div>
            <div>{{item.inventoryNum}}件</div>
            <div>{{item.inventoryWeight}}吨</div>
          </div>
        </div>
        <div class="matter-box">
          <el-row style="padding:10px;">
            <el-col :span="2">{{condition.search_EQ_roomCode}}</el-col>
            <el-col :span="3">总件数：{{num}}</el-col>
            <el-col :span="3">总重量：{{weight}}t</el-col>
            <el-col :offset="10"
                    :span="2">
              <el-button type="primary"
                         @click="handleShiftForm(false)">新增移位调整</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary"
                         @click="handleCountForm">新增盘点计划</el-button>
            </el-col>
          </el-row>
          <el-row class="jian-title-row">
            <span class="jian-title">间</span>
            <span class="matter-jian"
                  v-for="(item,index) in jian"
                  :key="index">{{item<10 ? '0'
                  +item
                  :
                  item}}
                  </span>
                  </el-row>
                  <el-row
                  class="matter-box-kua"
                  v-for="(items,index) in kvoList"
                  :key="index">
                <div class="kua-title-box">
                  <span v-if="index == 0">跨</span>
                  <div class='matter-kuai'>{{items.ktip}}</div>
                </div>
                <div v-for="(item,i) in items.jvoList"
                     :key="i"
                     v-on:click.prevent="checkOrClickMatter(item.jtip,items.ktip)"
                     v-bind:class="item.checked ? 'matter-item-box active': 'matter-item-box'">
                  <div class="child-div"
                       v-for="(data,d) in item.bvoList"
                       :key="d"
                       v-bind:style="{ backgroundColor: data.color}">
                    {{data.inventoryNum + '件'}}
                    {{data.inventoryWeight + '吨'}}
                  </div>
                </div>
          </el-row>
        </div>
        <add-shift-form ref="addShiftForm"
                        @load=""></add-shift-form>
        <add-count-form ref="addCountForm"
                        @load="loadData"></add-count-form>
      </div>
    </base-list>
  </div>
</template>

<script>
import addShiftForm from './matter/addShiftForm'
import addCountForm from './matter/addCountForm'
import { getCargoNameList, getPiecesCargo } from '@/api/things/accountPageList'
import { detailStorageSet } from '@/api/storageSet/storageSet'
import { getInventoryCount } from '@/api/matter/auditMatter'
import { addShift, getFindInventory } from '@/api/matter/shiftSearch'
import { getWarehouseList } from '@/api/adminWarehouse/adminWarehouse' //所属仓库来源于仓库设置
import autoSearchName from '@/components/autocomplete/autoSearchName' //货主组件
import { getStorageSetList } from '@/api/storageSet/storageSet' //仓库作业点设置左边表格  所属库房来源于库房设置
import autoSearchDic from '@/components/autocomplete/autoSearchDic'

export default {
  name: 'matterPageList',
  components: {
    addShiftForm,
    addCountForm,
    autoSearchName,
    autoSearchDic
  },
  data() {
    return {
      orgId: '',
      orgId:
        this.$store.state.user.currentUser.org &&
        this.$store.state.user.currentUser.org.id,
      orgName:
        this.$store.state.user.currentUser.org &&
        this.$store.state.user.currentUser.org.name,
      condition: this.comditions(),
      warehouseList: [],
      cargoNameList: [],
      pmLIst: [],
      storageSet: [],
      isShow: false,
      count: 0, //单击双击
      isctrl: false, //ctrl监听
      jian: 5,
      kua: 0,
      num: 0,
      weight: 0,
      kvoList: [
        {
          jvoList: [
            {
              bvoList: [
                {
                  cargoTypeName: '优钢',
                  color: '#0f0',
                  inventoryNum: 500,
                  inventoryWeight: 50.12,
                  numUnit: 'A'
                },
                {
                  cargoTypeName: '优钢',
                  color: '#f0f',
                  inventoryNum: 500,
                  inventoryWeight: 50.12,
                  numUnit: 'A'
                }
              ],
              jtip: 1
            },
            {
              bvoList: [
                {
                  cargoTypeName: '优钢',
                  color: '#0f0',
                  inventoryNum: 500,
                  inventoryWeight: 50.12,
                  numUnit: 'A'
                }
              ],
              jtip: 2
            }
          ],
          ktip: 1
        },
        {
          jvoList: [
            {
              bvoList: [
                {
                  cargoTypeName: '优钢',
                  color: '#0f0',
                  inventoryNum: 500,
                  inventoryWeight: 50.12,
                  numUnit: 'A'
                }
              ],
              jtip: 1
            },
            {
              bvoList: [
                {
                  cargoTypeName: '优钢',
                  color: '#ff0',
                  inventoryNum: 500,
                  inventoryWeight: 50.12,
                  numUnit: 'A'
                }
              ],
              jtip: 2
            }
          ],
          ktip: 2
        }
      ],
      ktipArr: [],
      jtipArr: [],
      concatArr: [],
      cargoTypeList: [],
      addShift: {
        search_EQ_roomCode: '',
        search_EQ_aulaNo: '',
        search_EQ_spanNo: '',
        search_EQ_warehouseCode: ''
      }
    }
  },
  mounted() {
    this.keyevent()
    //获取仓库
    getWarehouseList().then(res => {
      this.warehouseList = res.data.aaData
    })
    //获取货名
    getCargoNameList(this.$store.state.user.currentUser.org.id).then(res => {
      this.cargoNameList = res.data.aaData
    })
  },
  methods: {
    loadData() {
      this.$refs.matterPageList.loadData()
    },
    comditions() {
      return {
        search_EQ_warehouseCode: '',
        search_EQ_roomCode: '',
        search_EQ_roomName: '',
        search_EQ_cargoOwnerId: '',
        search_EQ_cargoName: '',
        search_EQ_normThree: '',
        search_EQ_normTwo: '',
        search_EQ_normOne: '',
        search_EQ_material: '',
        search_EQ_measureWay: '',
        search_EQ_manageWay: '',
        search_EQ_aulaNo: '',
        search_EQ_spanNo: ''
      }
    },
    getPlatDatas() {
      let that = this
      if (that.condition.search_EQ_warehouseCode == '') {
        that.$message.error('请选择所属仓库')
        return false
      }
      if (that.condition.search_EQ_roomCode == '') {
        that.$message.error('请选择库房')
        return false
      }
      let params = that.filterPamars(that.condition)
      getInventoryCount(params).then(function(res) {
        that.isShow = true
        that.kvoList = res.data.kvoList
        that.cargoTypeList = res.data.cargoTypeList
        that.readeyMatter()
        that.$nextTick(function() {
          that.kvoList
          that.num = res.data.totalInventoryNum
          that.weight = res.data.totalInventoryWeight
          that.kua = this.kvoList.length
          that.jian = this.kvoList[0].jvoList.length
        })
        if (
          that.condition.search_EQ_spanNo ||
          that.condition.search_EQ_aulaNo
        ) {
          that.checkOnlyInventory()
        }
      })
    },
    changeTargetRoom() {
      let that = this
      that.condition.search_EQ_aulaNo = ''
      that.condition.search_EQ_spanNo = ''
      for (var i = 0; i < that.storageSet.length; i++) {
        if (that.storageSet[i].roomCode == that.condition.search_EQ_roomCode) {
          that.condition.search_EQ_roomName = that.storageSet[i].roomName
          that.ktipArr = that.storageSet[i].maxSpan
          that.jtipArr = that.storageSet[i].maxAula
        }
      }
    },
    changeWarehouse() {
      this.condition.search_EQ_roomCode = ''
      this.condition.search_EQ_aulaNo = ''
      this.condition.search_EQ_spanNo = ''
      this.getWarehouseName()
    },
    getWarehouseName() {
      for (var i = 0; i < this.warehouseList.length; i++) {
        if (
          this.warehouseList[i].code == this.condition.search_EQ_warehouseCode
        ) {
          this.condition.search_EQ_warehouseName = this.warehouseList[i].name
          this.condition.search_EQ_warehouseId = this.warehouseList[i].id
          getStorageSetList({
            'search_EQ_warehouse.code': this.condition.search_EQ_warehouseCode
          }).then(res => {
            this.storageSet = res.data.aaData
          })
        }
      }
    },
    //新增移位调整
    handleShiftForm(bool) {
      let that = this
      if (bool) {
        that.$refs.addShiftForm.isEdit = true
        that.$refs.addShiftForm.dialogForm = true
      } else {
        if (!that.addShift.search_EQ_aulaNo) {
          that.$message.error('请选择一条数据')
          return false
        }
        that.getWarehouseName()
        that.getDoubleMatter('addShiftForm')
      }
    },
    //新增盘点计划
    handleCountForm() {
      let that = this
      if (!that.addShift.search_EQ_aulaNo) {
        that.$message.error('请选择一条数据')
        return false
      }
      that.getWarehouseName()
      that.getDoubleMatter('addCountForm')
    },
    getSelectFindInventory(Form) {
      let that = this
      let param = {
        // search_EQ_warehouseCode: 'CSK',
        // search_EQ_roomCode: 'A01'
        search_EQ_warehouseCode: that.condition.search_EQ_warehouseCode,
        search_EQ_roomCode: that.condition.search_EQ_roomCode,
        search_EQ_aulaNo: that.addShift.search_EQ_aulaNo,
        search_EQ_spanNo: that.addShift.search_EQ_spanNo
      }
      getFindInventory(param).then(function(res) {
        if (Form == 'addShiftForm') {
          that.$refs[Form].shiftData = that.$refs[Form].shiftData.concat(
            res.data.aaData
          )
          that.$refs[Form].lsShiftData = that.$refs[Form].lsShiftData.concat(
            res.data.aaData
          )
        } else {
          that.$refs[Form].CountData = that.$refs[Form].CountData.concat(
            res.data.aaData
          )
        }
      })
    },
    checkOrClickMatter(jtip, ktip) {
      //ktip: 跨数；jtip: 间数；
      let that = this
      that.count++
      setTimeout(function() {
        if (that.count === 2) {
          console.log('2') //这里双击时间
          let param = {
            roomCode: that.condition.search_EQ_roomCode,
            warehouseCode: that.condition.search_EQ_warehouseCode,
            aulaNo: jtip,
            spanNo: ktip
          }
          that.$router.push({
            path: '/goods/matter/stockManage',
            name: '库存管理',
            query: param
          })
          return false
        }
        if (!that.isctrl) {
          that.readeyMatter()
        }
        for (var i = 0; i < that.kvoList.length; i++) {
          if (i + 1 == ktip) {
            let datas = that.kvoList[i]
            for (var j = 0; j < datas.jvoList.length; j++) {
              if (datas.jvoList[j].checked) {
                continue
              }
              if (datas.jvoList[j].jtip == jtip) {
                datas.jvoList[j].checked = true
              } else {
                datas.jvoList[j].checked = false
              }
            }
          }
        }
        that.$nextTick(function() {
          that.addShift.search_EQ_aulaNo = jtip
          that.addShift.search_EQ_spanNo = ktip
          that.kvoList
          that.$forceUpdate()
        })
        that.count = 0
      }, 300)
    },
    doubleClick(jtip, ktip) {},
    handleCargoChange(status) {
      let that = this
      if (status == 'pm') {
        this.detaultCargoName()
      }
      console.log(that.condition)
      getPiecesCargo(that.condition).then(function(res) {
        that.pmLIst = res.data.aaData
        if (that.pmLIst.length == 1) {
          that.condition.search_EQ_normOne = that.pmLIst[0].cargoInfo.normOne
          that.condition.search_EQ_normTwo = that.pmLIst[0].cargoInfo.normTwo
          that.condition.search_EQ_normThree =
            that.pmLIst[0].cargoInfo.normThree
          that.condition.search_EQ_material = that.pmLIst[0].cargoInfo.material
          that.condition.search_EQ_manageWay =
            that.pmLIst[0].cargoInfo.manageWay
          that.condition.search_EQ_measureWay =
            that.pmLIst[0].cargoInfo.measureWay
          return false
        }
      })
    },
    detaultCargoName() {
      this.condition.search_EQ_normOne = ''
      this.condition.search_EQ_normTwo = ''
      this.condition.search_EQ_normThree = ''
      this.condition.search_EQ_material = ''
      this.condition.search_EQ_manageWay = ''
      this.condition.search_EQ_measureWay = ''
      this.pmLIst = []
    },
    checkOnlyInventory() {
      let that = this
      that.checkOrClickMatter(
        that.condition.search_EQ_aulaNo,
        that.condition.search_EQ_spanNo
      )
    },
    readeyMatter() {
      for (var i = 0; i < this.kvoList.length; i++) {
        let datas = this.kvoList[i]
        for (var j = 0; j < datas.jvoList.length; j++) {
          datas.jvoList[j].checked = false
        }
      }
    },
    getDoubleMatter(Form) {
      let that = this
      for (var i = 0; i < that.kvoList.length; i++) {
        let datas = that.kvoList[i]
        for (var j = 0; j < datas.jvoList.length; j++) {
          if (datas.jvoList[j].checked) {
            that.addShift.search_EQ_aulaNo = datas.jvoList[j].jtip
            that.addShift.search_EQ_spanNo = that.kvoList[i].ktip
            that.getSelectFindInventory(Form)
            that.$refs[Form].dialogForm = true
          }
        }
        that.$refs[Form].form.roomCode = that.condition.search_EQ_roomCode
        that.$refs[Form].form.roomName = that.condition.search_EQ_roomName
        that.$refs[Form].form.warehouseCode =
          that.condition.search_EQ_warehouseCode
        that.$refs[Form].form.warehouseName =
          that.condition.search_EQ_warehouseName
      }
    },
    matterPageList() {},
    keyevent() {
      var that = this
      var sUserAgent = navigator.userAgent
      var isWin =
        navigator.platform == 'Win32' || navigator.platform == 'Windows'
      var isMac =
        navigator.platform == 'Mac68K' ||
        navigator.platform == 'MacPPC' ||
        navigator.platform == 'Macintosh' ||
        navigator.platform == 'MacIntel'
      document.addEventListener('keydown', e => {
        if ((e.keyCode === 17 && isWin) || (e.keyCode === 91 && isMac)) {
          that.isctrl = true
        }
      })
      document.addEventListener('keyup', e => {
        if ((e.keyCode === 17 && isWin) || (e.keyCode === 91 && isMac)) {
          that.isctrl = false
        }
      })
    },
    handleOpen(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    },
    resuleBtn(aList) {
      this.$refs[aList].resetFields()
      this.condition = this.clearForm()
    },
    filterPamars(param) {
      let pam = {}
      for (let i in param) {
        if (param[i] != '') {
          pam[i] = param[i]
        }
      }
      return pam
    }
  }
}
</script>
<style scoped>
.matter-box {
  margin: 10px 0;
  padding: 10px;
  background-color: bisque;
}
.matter-item-box {
  width: 50px;
  height: 182px;
  border: 1px solid #ddd;
  border-right: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.matter-box-kua .matter-item-box:last-child {
  border-right: 1px solid #ddd;
}
.child-div {
  flex: 1;
  border-bottom: 1px solid #ddd;
  text-align: center;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.matter-item-box .child-div:last-child {
  border-bottom: 0;
}
.matter-box-kua {
  display: flex;
}
.jian-title {
  position: absolute;
  left: -10px;
}
.jian-title-row {
  position: relative;
  left: 27px;
}
.kua-title-box {
  width: 26px;
}
.matter-jian {
  display: inline-block;
  width: 50px;
  text-align: center;
}
.matter-jian:nth-child(1) {
  margin-left: 30px;
}
.matter-kuai {
  height: 159px;
  line-height: 160px;
}
.active {
  border: 2px solid red;
}
.Legend {
  display: flex;
  border-top: 1px dashed #ddd;
  padding: 10px 0;
  background-color: #eee;
}
.Legend-title {
  width: 100px;
  text-align: center;
}
.Legend-content {
  width: 90px;
  text-align: center;
}
.Legend-color {
  width: 40px;
  height: 30px;
  margin: 0 auto;
}
.gg-input {
  margin-bottom: 0 !important;
}
.gg-input .el-form-item__content .el-input {
  width: 100px !important;
}
.gg-input .el-form-item__content .el-autocomplete {
  width: 100px !important;
}
</style>
